<template>
	<div class="classifyManage">
		<el-row>
			<el-col :span="24">
				<el-button type="primary" color="#423d43" :dark="true" :icon="Plus" size="large" @click="addClassify('菜品')">
					新增菜品分类
				</el-button>

				<el-button type="primary" color="#ffb600" :icon="Plus" size="large" @click="addClassify('套餐')">
					新增套餐分类
				</el-button>
			</el-col>
		</el-row>

		<el-table :data="tableData" style="width: 100%; margin-top: 20px">
			<el-table-column prop="name" label="分类名称" align="center" />

			<el-table-column prop="username" label="分类类型" align="center">
				<template #default="{ row }">
					{{ row.type === 1 ? '菜品分类' : '套餐分类' }}
				</template>
			</el-table-column>

			<el-table-column prop="updateTime" label="操作时间" align="center" />

			<el-table-column prop="sort" label="排序" align="center" />

			<el-table-column fixed="right" label="操作" width="120" align="center">
				<template #default="{ row }">
					<el-button link style="color: dodgerblue" @click="editHandle(row)">修改</el-button>
					<el-button link style="color: red" @click="deleteHandle(row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-pagination
			v-model:current-page="pageNum"
			v-model:page-size="pageSize"
			:page-sizes="[10, 20, 30, 40, 50]"
			layout="total, sizes, prev, pager, next, jumper"
			:total="total"
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange" />

		<ClassifyDialog
			v-if="dialogVisible"
			:dialogVisible="dialogVisible"
			:typeName="typeName"
			:classifyName="classifyName"
			:editRow="editRow"
			@dialogClose="dialogClose"
			@getTableData="getTableData" />
	</div>
</template>

<script setup lang="ts" name="ClassifyManage">
	import { Plus } from '@element-plus/icons-vue'
	import { ElMessage, ElMessageBox } from 'element-plus'
	import { reactive, toRefs, onMounted } from 'vue'
	import ClassifyDialog from './components/ClassifyDialog.vue'
	import { classifyPage, deleteClassify } from '@/api/index'

	export interface ItableData {
		createTime: string
		createUser: string
		id: string
		name: string
		sort: number | null
		type: number
		updateTime: string
		updateUser: string
	}

	interface Istate {
		dialogVisible: boolean
		classifyName: string
		typeName: string
		tableData: Array<ItableData>
		pageNum: number
		pageSize: number
		total: number
		editRow: ItableData | null
	}

	const state: Istate = reactive({
		dialogVisible: false,
		typeName: '',
		classifyName: '',
		tableData: [],
		pageNum: 1,
		pageSize: 10,
		total: 0,
		editRow: null
	})

	const { dialogVisible, classifyName, tableData, pageNum, pageSize, total, typeName, editRow } = toRefs(state)

	onMounted(() => {
		getTableData()
	})

	const getTableData = async () => {
		const params = {
			pageNum: state.pageNum,
			pageSize: state.pageSize
		}
		try {
			const res = await classifyPage<{ records: ItableData[]; total: number }>(params)
			state.tableData = res.data.records
			state.total = res.data.total
		} catch (error) {
			ElMessage({
				type: 'error',
				message: error as string
			})
		}
	}

	/**
	 * 新增按钮点击事件
	 * @param type 菜品或套餐类型
	 */
	const addClassify = (type: string) => {
		state.dialogVisible = true
		state.classifyName = type
		state.typeName = '新增'
	}

	/**
	 * 弹框关闭事件
	 */
	const dialogClose = () => {
		state.dialogVisible = false
		state.editRow = null
	}

	const handleSizeChange = (size: number) => {
		state.pageSize = size
		getTableData()
	}
	const handleCurrentChange = (num: number) => {
		state.pageNum = num
		getTableData()
	}

	/**
	 * 修改分类数据
	 * @param row 分类数据
	 */
	const editHandle = (row: ItableData) => {
		state.dialogVisible = true
		state.classifyName = row.type === 1 ? '菜品' : '套餐'
		state.typeName = '修改'
		state.editRow = row
	}

	/**
	 * 删除分类
	 * @param row 分类数据
	 */
	const deleteHandle = async (row: ItableData) => {
		ElMessageBox.confirm('是否确认删除', '提示', {
			confirmButtonText: '确认',
			cancelButtonText: '取消',
			type: 'warning'
		})
			.then(async () => {
				try {
					const res = await deleteClassify<string>(row.id)
					ElMessage.success(res.data)
					getTableData()
				} catch (error) {
					ElMessage({
						type: 'error',
						message: error as string
					})
				}
			})
			.catch(() => {
				ElMessage({
					type: 'info',
					message: '取消'
				})
			})
	}
</script>

<style scoped lang="scss">
	.classifyManage {
		height: 100%;
		background-color: #fff;
	}
</style>
